<template>
  <view class="options-container">
    <!-- 单选题选项 -->
    <radio-group v-if="type === 1" @change="handleChange">
      <label v-for="option in options" :key="option.id">
        <view class="option-item"
          :class="getOptionClass(option.id)">
          <radio :value="option.id" :checked="isSelected(option.id)"></radio>
          <view class="option-content">
            <text class="option-id">{{ option.id }}</text>
            <text class="option-text">{{ option.content }}</text>
          </view>
          <view class="result-icon" v-if="showResult(option.id)">
            <image :src="getResultIcon(option.id)"></image>
          </view>
        </view>
      </label>
    </radio-group>

    <!-- 多选题选项 -->
    <checkbox-group v-else-if="type === 3" @change="handleChange">
      <label v-for="option in options" :key="option.id">
        <view class="option-item"
          :class="getOptionClass(option.id)">
          <checkbox :value="option.id" :checked="isSelected(option.id)"></checkbox>
          <view class="option-content">
            <text class="option-id">{{ option.id }}</text>
            <text class="option-text">{{ option.content }}</text>
          </view>
          <view class="result-icon" v-if="showResult(option.id)">
            <image :src="getResultIcon(option.id)"></image>
          </view>
        </view>
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    selected: {
      type: [String, Array],
      default: ''
    },
    answer: {
      type: [String, Array],
      default: ''
    },
    showAnswer: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    handleChange(e) {
      this.$emit('change', e.detail.value);
    },

    isSelected(optionId) {
      if (this.type === 1) {
        return this.selected === optionId;
      }
      return Array.isArray(this.selected) && this.selected.includes(optionId);
    },

    getOptionClass(optionId) {
      if (!this.showAnswer) {
        return {
          'selected': this.isSelected(optionId)
        };
      }

      if (this.type === 1) {
        return {
          'correct': optionId === this.answer && optionId === this.selected,
          'wrong': optionId !== this.answer && optionId === this.selected
        };
      }

      return {
        'correct': this.answer.includes(optionId) && this.selected.includes(optionId),
        'wrong': !this.answer.includes(optionId) && this.selected.includes(optionId)
      };
    },

    showResult(optionId) {
      return this.showAnswer && this.isSelected(optionId);
    },

    getResultIcon(optionId) {
      if (this.type === 1) {
        return optionId === this.answer ? 
          '../../static/images/true.png' : 
          '../../static/images/false.png';
      }

      return this.answer.includes(optionId) ? 
        '../../static/images/true.png' : 
        '../../static/images/false.png';
    }
  }
};
</script>

<style scoped>
.options-container {
  padding: 20rpx;
}

.option-item {
  width: 100%;
  height: 100rpx;
  border-radius: 52rpx;
  border: 1px solid #D1D1D1;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
  background-color: #fff;
  position: relative;
}

.option-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.option-id {
  font-size: 32rpx;
  color: #0071BC;
  font-weight: bold;
  margin-right: 20rpx;
  width: 40rpx;
}

.option-text {
  font-size: 28rpx;
  color: #333;
}

.result-icon {
  width: 75rpx;
  height: 75rpx;
  position: absolute;
  right: 50rpx;
}

.result-icon image {
  width: 100%;
  height: 100%;
}

.selected {
  background-color: #88CFFF;
}

.correct {
  background-color: #74DAC6 !important;
}

.wrong {
  background-color: #FE9393 !important;
}

/* 隐藏原生单选框和多选框 */
:deep(uni-radio),
:deep(uni-checkbox) {
  display: none !important;
}
</style>